/* eslint-disable react-hooks/exhaustive-deps */
import React, { useEffect, useReducer, Fragment } from "react";
import { Table, Avatar, Button, Form, Input, Row, Col } from "antd";
import { formatDate } from "../../util/tool";
import styles from "./index.module.scss";
import { usersList } from "../../api/serve";
import { stati } from "../../api/api";
const initState = {
  userData: "", //用户数据
  page: 1, //页码数
  total: "", //数据多少条
  pageSize: 10, //每页显示多少数据
  key: "", //搜索key值
  skey: "", //触发搜索的条件，该值变化就进行搜索
  isOpen: false,
  count: 1,
  defauletpage: 1,
};

function adminRedcuer(state = initState, action) {
  if (action) {
    return { ...state, ...action };
  }
  return state;
}
function MemberList() {
  const [state, dispatch] = useReducer(adminRedcuer, initState);

  const paginationProps = {
    //分页的配置
    defaultCurrent: state.defauletpage,
    current: state.page,
    pageSize: state.pageSize,
    total: state.total,
    onChange: (page, pageSize) => {
      //如果当前选择一页显示数据大于10条则将其恢复成最初状态
      dispatch({
        page,
        pageSize,
      });
    },
  };
  const init = () => {
    //请求用户数据方法
    usersList(
      { page: state.page, pageSize: state.pageSize, key: state.key },
      (res) => {
        dispatch({
          userData: res.data[0].data,
          total: res.data[1].data[0].total,
        });
      }
    );
  };
  useEffect(
    // 监听state.page, state.pageSize, state.skey进行请求数据
    function () {
      init();
    },
    [state.page, state.pageSize, state.skey]
  );
  const columns = [
    {
      title: "ID",
      dataIndex: "id",
      align: "center",
    },
    {
      title: "头像",
      dataIndex: "avatar",
      align: "center",
      render(data, record) {
        if (!data) {
          return <Avatar src="https://joeschmoe.io/api/v1/random" />;
        } else if (record.avatartype === "1") {
          return <Avatar src={data} />;
        }
        return <Avatar src={stati + data} />;
      },
    },
    {
      title: "姓名",
      dataIndex: "nick",
      align: "center",
    },
    {
      title: "邮箱",
      dataIndex: "email",
      align: "center",
    },
    {
      title: "用户类型",
      dataIndex: "gender",
      align: "center",
      render(data) {
        if (data === "1") {
          return "微信用户";
        }
        return "web用户";
      },
    },
    {
      title: "创建时间",
      dataIndex: "create_time",
      align: "center",
      render: (value) => {
        return formatDate(value, "YYYY-MM-DD hh:mm:ss");
      },
    },
    {
      title: "余额",
      dataIndex: "mymoney",
      align: "center",
    },
  ];
  const getInputValue = (e) => {
    const { value } = e.target;
    dispatch({
      key: value,
    });
  };
  const handleSearch = () => {
    // 点击搜索将state中skey的值改变进而触发useEffect进行接口请求
    dispatch({
      page: 1,
      skey: state.key,
    });
  };
  return (
    <Fragment>
      <div className={styles.search + " search"}>
        <Form
          labelCol={{
            span: 4,
          }}
          wrapperCol={{
            span: 14,
          }}
        >
          <Row>
            <Col span={5} offset={8}>
              <Input
                placeholder="请输入你要搜索的内容"
                onChange={(e) => getInputValue(e)}
              />{" "}
            </Col>
            <Col>
              <Button type="primary" onClick={handleSearch}>
                搜索
              </Button>
            </Col>
          </Row>
        </Form>
      </div>
      <Table
        pagination={paginationProps}
        columns={columns}
        dataSource={state.userData}
        rowKey="id"
      />
    </Fragment>
  );
}
export default MemberList;
